<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Data');
        data.addColumn('number', 'Temperatura');
        
        data.addRows([
        {% for h in hist %}
   			['{{ h.data }}', {{ h.temperatura }}],
		{% endfor %}
          
        ]);

        var options = {
          width: 700, height: 200,
          title: 'Temperatura'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    
    <script>
    	jQuery(document).ready(function() {
        	$('#sel_salas').change(function() {
  				
			});
		});
    </script>
  </head>
  <body>
  	<div id="chart_div"></div>
  	<br />
	<form id='form_salas' method='GET'>
	  	<div id="salas">
	  		<select name='sel_salas' id="sel_salas">
	  			{% for c in col %}
	  				<option value="{{c.id}}"> {{ c.local }} </option>
	  			{% endfor %}
	  		</select>
	  		<input type='submit' value='Gerar gráfico'/>
	  	</div>
  	</form>
  	
    
    
  </body>
</html>